<template>
	<div>
		<el-container>
			<head-top></head-top>
			<el-header>
				<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list">
					<el-form-item label="服务名称">
						<el-input v-model="formInline.servicename" placeholder="" @keyup.enter.native="onSearch(1)"></el-input>
					</el-form-item>
					<el-form-item label="主机">
						<el-input v-model="formInline.hostname" placeholder="" @keyup.enter.native="onSearch(1)"></el-input>
					</el-form-item>
					<el-form-item label="开发人员">
						<el-input v-model="formInline.servicedeveloper" placeholder="" @keyup.enter.native="onSearch(1)"></el-input>
					</el-form-item>
					<el-form-item label="访问地址">
						<el-input v-model="formInline.service_url" placeholder="" @keyup.enter.native="onSearch(1)"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSearch(1)">查询</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true" class="form-inline form-menu-function">
					<el-button type="primary" icon="el-icon-edit" @click="create">新增</el-button>
					<el-button type="primary" icon="el-icon-edit" @click="syncwayne">同步wayne信息</el-button>
				</el-form>
			</el-header>

			<el-main>
				<el-table :data="tableData" :row-class-name="tableRowClassName">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<!-- <el-collapse v-model="activeNames">
										<el-collapse-item v-for="(item, index) in props.row.cmdbDeployList" :key="index" :title="item.deployName">
											
											<el-form-item label="jenkins 视图地址">
												<a :href="item.jenkinsView" target="_blank">点我打开jenkins</a>
											</el-form-item>
											<el-form-item label="访问地址" >
												{{item.serviceUrl}}
											</el-form-item>
										</el-collapse-item>

								</el-collapse> -->
								<el-table :data="props.row.cmdbDeployList" style="width: 100%">
									<el-table-column prop="deployName" label="部署名称" width="180">
									</el-table-column>

									<el-table-column label="jenkins地址" width="120">
										<template slot-scope="scope">
											<a target="_blank" :href="props.row.cmdbDeployList[scope.$index].jenkinsView" v-show="props.row.cmdbDeployList[scope.$index].jenkinsView">跳转jenkins</a>
										</template>
									</el-table-column>

									<el-table-column prop="serviceUrl" label="访问地址" width="500">
									</el-table-column>
									<el-table-column prop="deployType" label="部署方式" :formatter="formatterdeployType">
									</el-table-column>
									<el-table-column prop="deployHostname" label="部署服务器" :formatter="formatterdeployHostname">
									</el-table-column>
									<el-table-column prop="k8sName" label="k8s集群名称" :formatter="formatterk8sName">
									</el-table-column>
									<el-table-column label="wayne地址" width="120">
										<template slot-scope="scope">
											<a target="_blank" :href="props.row.cmdbDeployList[scope.$index].wayneView" v-show="props.row.cmdbDeployList[scope.$index].wayneView">跳转wayne</a>
										</template>
									</el-table-column>


								</el-table>
								<!-- </template> -->


							</el-form>
						</template>
					</el-table-column>
					<el-table-column prop="id" label="序号" width="100">
					</el-table-column>
					<el-table-column prop="servicename" label="服务名称" width="400">
					</el-table-column>
					<el-table-column prop="servicedeveloper" label="开发人员" width="100">
					</el-table-column>
					<el-table-column prop="description" label="描述" width="300">
					</el-table-column>
					<!-- <el-table-column prop="status" label="状态" width="300"> -->
					<el-table-column prop=""></el-table-column>
					</el-table-column>
					<el-table-column label="操 作" width="400">
						<template slot-scope="scope">
							<el-button size="medium" type="info" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="medium" type="info" icon="el-icon-edit" @click="handleClone(scope.$index, scope.row)">克隆</el-button>
							<el-button size="medium" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>

			</el-main>
			<el-dialog :title="title" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogFormVisible"
			 v-dialogDrag>
				<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
					<el-tab-pane label="服务管理" name="first">
						<el-form :model="dialogform" :rules="rules2" ref="dialogform">
							<el-form-item label="服务名称" :label-width="formLabelWidth">
								<el-input v-model="dialogform.servicename" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="开发人员" :label-width="formLabelWidth" prop="idcid">
								<el-input v-model="dialogform.servicedeveloper" autocomplete="off"></el-input>
							</el-form-item>
							<el-form-item label="描述" :label-width="formLabelWidth">
								<el-input v-model="dialogform.description" autocomplete="off"></el-input>
							</el-form-item>


							<el-form-item label="部署信息">

								<el-button type="primary" size="mini" @click="addDeployItem">添加部署信息</el-button>
							</el-form-item>
							<el-collapse>
								<div v-for="(item, index) in dialogform.cmdbDeployList" :key="index">
									<el-collapse-item :title="item.deployName">
										<el-form-item>
											<i class="el-icon-delete" @click="deleteDeployItem(item, index)"></i>
										</el-form-item>

										<el-form-item label="部署命名" :prop="'cmdbDeployList.' + index + '.deployName'" :rules="{
								    required: true, message: '命名不能为空', trigger: 'blur'
								}">
											<el-input v-model="item.deployName"></el-input>
										</el-form-item>

										<el-form-item label="部署方式" :label-width="formLabelWidth">

											<el-select v-model="item.deployType" autocomplete="off">
												<el-option v-for="key in Object.keys(deploytypeoptions)" :key="key" :label="deploytypeoptions[key]" :value="key"></el-option>
											</el-select>
										</el-form-item>
										<div v-show="item.deployType==1">

											<el-form-item label="集群名称" :prop="'cmdbDeployList.' + index + '.k8sName'">
												<el-select v-model="item.k8sName" autocomplete="off">
													<el-option v-for="key in Object.keys(deploykubenetesnameoptions)" :key="key" :label="deploykubenetesnameoptions[key]"
													 :value="key"></el-option>
												</el-select>
											</el-form-item>
											<!-- <el-form-item label="部门" :prop="'cmdbDeployList.' + index + '.k8sDepartment'">
												<el-input v-model="item.k8sDepartment"></el-input>
											</el-form-item>
											<el-form-item label="项目" :prop="'cmdbDeployList.' + index + '.k8sProject'">
												<el-input v-model="item.k8sProject"></el-input> -->
											</el-form-item>
											<el-form-item label="部署" :prop="'cmdbDeployList.' + index + '.k8sDeployment'">
												<el-input v-model="item.k8sDeployment"></el-input>
												<!-- {{item.k8sDeployment}} -->

											</el-form-item>
										</div>
										<div v-show="item.deployType==0">
											<el-form-item label="部署服务器">
												<el-select v-model="item.deployHostname" filterable placeholder="请选择" multiple>
													<el-option v-for="quipmentinfo in equipmentinfooptions" :key="quipmentinfo.value" :label="quipmentinfo.label"
													 :value="quipmentinfo.label"></el-option>

												</el-select>
											</el-form-item>
											<el-form-item label="部署路径">
												<el-input v-model="item.servicePath"></el-input>
												<!-- {{item.servicePath}} -->
											</el-form-item>
											<el-form-item label="维护命令">
												<el-input type="textarea" :rows="5" v-model="item.opsOrder" placeholder="启动:   停止:"></el-input>
											</el-form-item>
										</div>
										<el-form-item label="jenkins 视图地址">
											<el-input v-model="item.jenkinsView"></el-input>
											<!-- <a v-show="item.jenkinsView" :href="item.jenkinsView" target="_blank">跳转jenkins</a> -->
										</el-form-item>
										<el-form-item label="访问地址" :prop="'cmdbDeployList.' + index + '.serviceUrl'">
											<el-input type="textarea" :rows="5" v-model="item.serviceUrl" placeholder="多个地址;隔开"></el-input>
										</el-form-item>
									</el-collapse-item>

								</div>
							</el-collapse>
						</el-form>

					</el-tab-pane>
					<el-tab-pane label="知识库" name="second">
						<div v-if="dialogform.id&&activeName=='second'">
							<div style="margin-right: 10%;margin-left:90%">
								<el-button size="small" type="primary" @click="relatewiki()">新增关联</el-button>
							</div>
							<wiki :serviceId.sync="dialogform.id" :appType.sync="appType" v-if="dialogform.id&&dialogFormVisible"></wiki>
							<wiki-common :dialogFormVisible.sync="wikicommonshow" :serviceId.sync="dialogform.id" :appType.sync="appType"
							 v-if="wikicommonshow"></wiki-common>
						</div>
					</el-tab-pane>
				</el-tabs>

				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormsubmit('dialogform')">确 定</el-button>
				</div>

			</el-dialog>
		</el-container>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import wikiCommon from '@/components/wikiCommon'
	import wiki from '@/page/Wiki'
	import {
		mapGetters
	} from 'vuex';

	import {
		update,
		list,
		del,
		search,
		syncwayne
	} from '@/api/service'

	export default {
		data() {
			return {
				formLabelWidth: "20",
				formInline: {

				},
				dialogform: {
					id: null,
					servicename: "",
					servicedeveloper: "",
					status: 0,
					description: "",
					cmdbDeployList: [],
				},
				dialogFormVisible: false,
				title: "服务编辑",
				tableData: [],
				count: 0,
				currentPage: 1,
				pageSize: 10,
				rules2: {

				},
				activeName: 'first',
				activeNames: [],
				wikicommonshow: false,
				appType: "service",
				// activeNames: ['1','2','3','4','5'],
			}
		},
		created() {
			this.initData(this.currentPage, this.pageSize);
			// 			this.$store.dispatch('setDeployTypeOptions');
			// 			this.$store.dispatch('setDeploykubenetesnameoptions');
			// 			this.$store.dispatch('setEquipmentInfoOptions');

		},
		computed: {
			...mapGetters({
				deploytypeoptions: 'getDeployTypeOptions',
				deploykubenetesnameoptions: 'getDeploykubenetesnameoptions',
				equipmentinfooptions: 'getEquipmentInfoOPtions',
			}),
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val;
				this.onSearch();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.onSearch();
			},
			create() {
				this.dialogform.status = "0";
				this.dialogFormVisible = true;
				this.dialogform = {
					id: "",
					servicename: "",
					servicedeveloper: "",
					status: 0,
					description: "",
					cmdbDeployList: [],
				};
			},
			onSearch(currentPage) {
				if (currentPage) {
					this.currentPage = currentPage;
				}
				search(this.formInline, this.pageSize, this.currentPage)
					.then((response) => {
						this.inittable(response)
					})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.status == 1) {
					return 'warning-row';
				} else if (row.status == 0) {
					return 'success-row';
				}
				return '';
			},
			handleEdit(index, row) {
				console.dir(row)
				this.dialogform = {}
				this.dialogform = JSON.parse(JSON.stringify(row));
				if (this.dialogform.cmdbDeployList) {
					this.dialogform.cmdbDeployList.forEach(item => {
						item.deployType = String(item.deployType)
						if (item.deployHostname) {
							item.deployHostname = item.deployHostname.split(";")
						}
					})

				}
				console.log("this.dialogform: " + this.dialogform.cmdbDeployList);
				this.dialogFormVisible = true

			},
			handleClone(index, row) {
				this.dialogform = {}
				this.dialogform = JSON.parse(JSON.stringify(row));
				this.dialogform.id = null
				if (this.dialogform.cmdbDeployList) {
					this.dialogform.cmdbDeployList.forEach(item => {
						item.deployType = String(item.deployType)
						if (item.deployHostname) {
							item.deployHostname = item.deployHostname.split(";")
						}
					})

				}
				console.log("this.dialogform: " + this.dialogform.cmdbDeployList);
				this.dialogFormVisible = true

			},
			async handleDelete(index, row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del(row)
						.then((response => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.initData(this.currentPage, this.pageSize)
						}))
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			async initData(currentPage, pageSize) {
				await list(currentPage, pageSize)
					.then((response) => {
						this.inittable(response)
					})
			},
			inittable(response) {
				this.tableData = response.items;
				// 				if (this.tableData) {
				// 					this.tableData.forEach(item => {
				// 						if (item.cmdbDeployList) {
				// 							item.cmdbDeployList.forEach(item => {
				// 								if (item.deployHostname) {
				// 									item.deployHostname = item.deployHostname.split(";")
				// 								}
				// 							})
				// 						}
				// 
				// 
				// 					})
				// 				}
				this.count = response.totalNum;
			},
			dialogFormsubmit(formName) {
				console.dir(this.$refs[formName])
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.dialogform.cmdbDeployList) {
							this.dialogform.cmdbDeployList.forEach(item => {
								if (item.deployHostname) {
									item.deployHostname = item.deployHostname.join(";")
								} else {
									item.deployHostname = ""
								}
							})
						}

						console.log("this.dialogform.cmdbDeployList.deployHostname: " + this.dialogform.cmdbDeployList.deployHostname);
						update(this.dialogform)
							.then((response) => {
								console.log(response)
								this.dialogFormVisible = false;
								this.initData(this.currentPage, this.pageSize);
							})
					}
				})
			},
			addDeployItem() {
				console.log("this.dialogform.cmdbDeployList: " + this.dialogform.cmdbDeployList);
				this.dialogform.cmdbDeployList.push({
					deployName: '点我修改',
				})
			},
			deleteDeployItem(item, index) {
				this.dialogform.cmdbDeployList.splice(index, 1)
			},
			formatterdeployType(row, column, cellValue, index) {
				return this.deploytypeoptions[cellValue]
			},
			formatterdeployHostname(row, column, cellValue, index) {
				let hostname = '';
				if (cellValue) {
					let hostValue = cellValue.split(";")
					if (hostValue) {
						hostValue.forEach((item) => {
							hostname = hostname + item + "\n"
						})
					}

				}
				return hostname;
			},
			formatterk8sName(row, column, cellValue, index) {
				return this.deploykubenetesnameoptions[cellValue]
			},
			async syncwayne() {
				await syncwayne()
					.then((response => {
						this.$message({
							type: 'success',
							message: '同步成功!'
						});
					}))
					.error(() => {
						this.$message({
							type: 'error',
							message: '同步失败'
						});
					});
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			relatewiki() {
				this.wikicommonshow = true;
			},
		},
		components: {
			headTop,
			wiki,
			wikiCommon,
		},
	};
</script>

<style>
	.el-table .cell {
		white-space: pre-line !important;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 120px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 30%;
	}

	.demo-table-expand el-input {
		width: 500px;
	}
</style>
